<template>
	<view class="wrap u-skeleton">
		<!-- 滑动标签 -->
		<u-tabs-swiper class="u-skeleton-rect" ref="tabs" @change="changeTab" :list="tablist" :current="tabCurrent" :is-scroll="true" active-color="#01906c" inactive-color="#909399" bar-width="60" gutter="100"></u-tabs-swiper>
		<!-- 图文列表 -->
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<!-- 有内容 -->
					<template v-if="item.list.length > 0">
						<news-topic-list class="px-20" :list="item.list"></news-topic-list>
						<u-loadmore :status="loadStatus[tabCurrent]"></u-loadmore>
					</template>
					<!-- 无内容 -->
					<template v-else>
						<u-empty text="本来无一物,何处惹尘埃" src="/static/img/demo/spring.svg" icon-size="500" mode="list"></u-empty>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 加载更多
				loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
				// 标签栏
				tabCurrent:0, 
				tablist: [
					{name:"关注"},
					{name:"谷雨"},
					{name:"芒种"},
					{name:"小满",count:5},
					{name:"霜降"},
					{name:"寒露"}
				],
				// 列表数据
				swiperCurrent:0,
				swiperList:[
					{
						list:[
							{title:"秋天的第一杯奶茶",img:"/static/img/list/01.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"要么瘦，要么死",img:"/static/img/list/02.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"打工人",img:"/static/img/list/03.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"早安，你好",img:"/static/img/list/04.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"奥利给，加油",img:"/static/img/list/05.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"光辉岁月",img:"/static/img/list/06.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"有志青年",img:"/static/img/list/07.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"一切皆有可能",img:"/static/img/list/08.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"不走寻常路",img:"/static/img/list/09.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100}
						]
					},
					{
						list:[
							{title:"早安，你好",img:"/static/img/list/04.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"奥利给，加油",img:"/static/img/list/05.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"光辉岁月",img:"/static/img/list/06.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"秋天的第一杯奶茶",img:"/static/img/list/01.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"要么瘦，要么死",img:"/static/img/list/02.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"打工人",img:"/static/img/list/03.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"有志青年",img:"/static/img/list/07.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"一切皆有可能",img:"/static/img/list/08.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"不走寻常路",img:"/static/img/list/09.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100}
						]
					},
					{
						list:[
							{title:"光辉岁月",img:"/static/img/list/06.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"有志青年",img:"/static/img/list/07.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"一切皆有可能",img:"/static/img/list/08.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"秋天的第一杯奶茶",img:"/static/img/list/01.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"要么瘦，要么死",img:"/static/img/list/02.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"打工人",img:"/static/img/list/03.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"早安，你好",img:"/static/img/list/04.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"奥利给，加油",img:"/static/img/list/05.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"不走寻常路",img:"/static/img/list/09.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100}
						]
					},
					{
						list:[
							{title:"奥利给，加油",img:"/static/img/list/05.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"光辉岁月",img:"/static/img/list/06.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"有志青年",img:"/static/img/list/07.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"一切皆有可能",img:"/static/img/list/08.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"秋天的第一杯奶茶",img:"/static/img/list/01.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"要么瘦，要么死",img:"/static/img/list/02.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"打工人",img:"/static/img/list/03.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"早安，你好",img:"/static/img/list/04.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"不走寻常路",img:"/static/img/list/09.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100}
						]
					},
					{
						list:[
							{title:"打工人",img:"/static/img/list/03.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"早安，你好",img:"/static/img/list/04.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"奥利给，加油",img:"/static/img/list/05.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"光辉岁月",img:"/static/img/list/06.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100},
							{title:"有志青年",img:"/static/img/list/07.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"一切皆有可能",img:"/static/img/list/08.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"秋天的第一杯奶茶",img:"/static/img/list/01.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
							{title:"要么瘦，要么死",img:"/static/img/list/02.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
							{title:"不走寻常路",img:"/static/img/list/09.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100}
						]
					},
					{
						list:[
							
						]
					}
				]
			};
		},
		methods: {
			// tab栏切换
			changeTab(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current; 
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabCurrent = current;
			},
			// scroll-view到底部加载更多
			reachBottom() {
				// 是否可加载
				if (this.loadStatus[this.tabCurrent] !== 'loadmore') return;
				// 加载更多
				this.loadStatus.splice(this.tabCurrent,1,"loading");
				setTimeout(() => {
					this.getList(this.tabCurrent);
				}, 1000);
			},
			// 获取列表
			getList(idx) {
				// 随机添加5条数据
				for(let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.swiperList[idx].list.length - 1);
					let data = JSON.parse(JSON.stringify(this.swiperList[idx].list[index]));
					this.swiperList[idx].list.push(data);
				}
				// 更新加载状态
				this.loadStatus.splice(this.tabCurrent,1,"nomore")
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
